import React, { Component } from 'react'
import ReactDOM from 'react-dom';
/*
    setState是同步还是异步的
    1、react18
    1) 合成事件：异步的
    2) 原生的事件处理函数、定时器:异步的
    2、react18版本之前：
    1）合成事件：异步的
    2）原生的事件处理函数、定时器：同步的
*/
export default class SetStateStatus extends Component {
 //相当于vue的mounted生命周期
 componentDidMount(){
    document.querySelector("#btn1").addEventListener('click',()=>{
        console.log('1.',this.state.num);
        this.setState({
            num:this.state.num+1
        })
        console.log('2.',this.state.num);
    })
    // setTimeout(() => {
    //     console.log('1.',this.state.num);
    //     this.setState({
    //         num:this.state.num+1
    //     })
    //     console.log('2.',this.state.num);
    // }, 1000);

 }
 state={
    num:0
 }
 increment=()=>{
    ReactDOM.flushSync(()=>{
        this.setState(()=>{
            return{
              num:this.state.num+3  
            }
        },()=>{
            console.log('1.',this.state.num);
        })
    })
    ReactDOM.flushSync(()=>{
        this.setState(()=>{
            return{
              num:this.state.num+1  
            }
        },()=>{
            console.log('2.',this.state.num);
        })
    })
    ReactDOM.flushSync(()=>{
        this.setState(()=>{
            return{
              num:this.state.num+2  
            }
        },()=>{
            console.log('3.',this.state.num);
        })
    })
 }
  render() {
    return (
      <div>
        <button onClick={this.increment}>合成事件</button>
        <button id='btn1'>原生事件</button>
      </div>
    )
  }
}
